<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS background 及 box 练习</title>
  <style>
    h1 {
      font-family: '思源宋体';
      font-weight: 900;
      text-align: center;
    }

    .container {
      height: 500px;
      width: 500px;
      background-color: rgb(101, 156, 99);
      background-image: url('https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wHgi?ver=7bd0');
      /* background-image: linear-gradient(#648880, #075a99, #dfaf2d);
      background-image: linear-gradient(-45deg, red 0%, orange 25%, yellow 50%, green 75%, blue 100%); */
      background-size: 100%;
      background-repeat: no-repeat;
      /* background-position: -50% 100%; */
      color: #fff;
      font-size: 18px;
      /* text-shadow: 1px 1px 0.2 rgb(236, 215, 215); */
      background-attachment: fixed;
      margin: 10px auto;
      padding: 16px;
      border: 2px #ccc solid;
    }

    .box {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 5px;
      font-family: sans-serif;
      text-align: center;
      line-height: 1;
      backdrop-filter: blur(2px);
      width: 100px;
      height: 100px;
      padding: 20px;
      /* 元素居中 */
      margin: 10px auto;
      border: 1px red solid;
      box-shadow: 1px 2px 5px 3px #fff inset;
      /* box-sizing: border-box; */
    }

  </style>
</head>

<body>
  <h1>CSS background及box练习</h1>
  <hr>
  <div class="container">道冲而用之或不盈，渊兮似万物之宗。挫其锐，解其纷，和其光，同其尘。湛兮似或存，吾不知谁之子，象帝之先。
    <p class="box">backdrop-filter: blur(10px)</p>
  </div>
</body>

</html>
